import React from 'react';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';
import css from './index.less';
import PageThumb from 'components/pageThumb';
import Cards from '../components/cards';
import classnames from 'classnames';

@inject('store')
@observer
export default class ToPage extends React.Component {

  static propTypes = {
    actionDetail: PropTypes.any,
    onChange: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedId: props.actionDetail,
    };
  }
  render() {
    const { onChange, store: { project: { currentPages } } } = this.props;
    const { selectedId } = this.state;
    const width = 62;
    const list = currentPages.list
      .filter(page => currentPages.current !== page)
      .map((page, index) => {
        const _props = {
          onClick: () => {
            onChange(page, false);
            this.setState({
              selectedId: page.id,
            });
          },
          className: classnames(css.pageThumb, {
            [css.selected]: page.id === selectedId
          })
        };
        return (
          <div {..._props}>
            <PageThumb mod={page} key={index} maxWidth={width - 2} className={css.pageThumbCard} />
          </div>
        );
      });
    const props = {
      width,
      list,
    };
    return (
      <div className={css.box}>
        <Cards {...props}/>
      </div>
    );
  }
}
